<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>简单实用的jQuery提示框美化插件(支持alert、confirm和toast)</title>
<link href="Fytx_Tips.css" rel="stylesheet" type="text/css" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<!--配置样式（也可以默认使用）-->
<script type="text/javascript" src="Fytx_Tips_Config.js"></script>
<!--美化脚本程序-->
<script type="text/javascript" src="Fytx_Tips.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#alertbtn").click(function(){
		$.alert("提示信息","这个是弹出alert框！");
	});
	$("#confirmbtn").click(function(){
		$.confirm("提示信息","这个是弹出confirm框！");
	});
	$.isok=function(){
		alert("点击了确定按钮！");
	}
	$.iscancel=function(){
		alert("点击了取消按钮！");
	}
	$("#toastbtn").click(function(){
		$.toast("这个是弹出toast框！");
	});
});
</script>
</head>

<body>
<p align="center" style="color:#f20;">本插件支持：Firefox、chrome、Safari、IE9及以上IE浏览器</p>
<p align="center">
	<input type="button" value="弹出alert框" id="alertbtn" /> 
	<input type="button" value="弹出confirm框" id="confirmbtn" /> 
	<input type="button" value="弹出toast框" id="toastbtn" />
</p>
<p style="padding:0px 20px; 0px 20px">
	【使用步骤】
</p>
<p style="padding:0px 20px; 0px 20px">
	1、引入jquery ;
</p>
<p style="padding:0px 20px; 0px 20px">
	2、引入Fytx_Tips.css ;
</p>
<p style="padding:0px 20px; 0px 20px">
	3、引入Fytx_Tips_Config.js , 打开这个文件可修改弹出框的颜色;
</p>
<p style="padding:0px 20px; 0px 20px">
	4、引入Fytx_Tips.js ;
</p>
	
<p style="padding:0px 20px; 0px 20px;line-height:24px;">
	5、弹出 alert 框方法:<br />
	调用函数：$.alert("标题","内容");<br />
</p>
<p style="padding:0px 20px; 0px 20px;line-height:24px;">
	6、弹出 confirm 框方法:<br />
	调用函数：$.confirm("标题","内容","确定按钮传递参数(可选)","取消按钮传递参数(可选)");<br />
	回调函数：（不需要回调时，可以省略回调函数）<br />
	$.isok() 或 $.isok("确定按钮传递参数");<br />
	$.iscancel() 或 $.iscancel("取消按钮传递参数");<br />
	例如：<br />
	弹出confirm框,点击确定回调 $.isok() , 点击取消回调 $.iscancel()<br />
	$("#confirmbtn").click(function(){<br />
	&nbsp;&nbsp;&nbsp;&nbsp;$.confirm("提示信息","这个是弹出confirm框！");<br />
	});<br />
	$.isok=function(){<br />
	&nbsp;&nbsp;&nbsp;&nbsp;alert("点击了确定按钮！");<br />
	}<br />
	$.iscancel=function(){<br />
	&nbsp;&nbsp;&nbsp;&nbsp;alert("点击了取消按钮！");<br />
	}<br /><br />
	
	弹出confirm框,点击确定回调 $.isok(ok) , 点击取消回调 $.iscancel(cancel)<br />
	$("#confirmbtn").click(function(){<br />
	&nbsp;&nbsp;&nbsp;&nbsp;$.confirm("提示信息","这个是弹出confirm框！","这是确定按钮传递参数","这是取消按钮传递参数");<br />
	});<br />
	$.isok=function(ok){<br />
	&nbsp;&nbsp;&nbsp;&nbsp;alert(ok);<br />
	}<br />
	$.iscancel=function(cancel){<br />
	&nbsp;&nbsp;&nbsp;&nbsp;alert(cancel);<br />
	}<br />
	
</p>
<p style="padding:0px 20px; 0px 20px;line-height:24px;">
	7、弹出 toast 框方法:<br />
	调用函数：$.toast("内容","弹出框自动关闭时间(整型)默认值为3","弹出框是否可点击关闭（布尔型）");<br />
	例如：<br />
	$.toast("内容",5,true); &nbsp;&nbsp;&nbsp;&nbsp;弹出toast框5秒后自动关闭，在关闭之前也可以点击弹出框直接关闭;<br />
	$.toast("内容",5,false); &nbsp;&nbsp;&nbsp;&nbsp;弹出toast框5秒后自动关闭，在自动关闭之前点击弹出框也不会关闭;<br />
	$.toast("内容",0); &nbsp;&nbsp;&nbsp;&nbsp;弹出toast框不会关闭，刷新页面或调用$.removetoast()进行关闭;
	<br /><br /><br />
</p>
</body>
</html>
